<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>通讯录</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/materialdesignicons.min.css"/>
    <link href="js/jquery-confirm/jquery-confirm.min.css" rel="stylesheet">
    <link href="js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid p-t-15">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <div id="toolbar" class="toolbar-btn-action">
                    <form class="form-inline" name="searchForm" action="#" method="post">
                        <input
                                id="userId"
                                type="hidden"
                                name="userId"
                                value="0"
                                th:value="${session.user.id}"
                                class="form-control"
                        />

                        <label for="chatName" class="ml-2"></label>
                        <input
                                id="chatName"
                                type="text"
                                placeholder="名称"
                                name="chatName"
                                class="form-control"
                        />

                        <label for="chatType" class="ml-2"></label>
                        <select id="chatType" name="chatType" class="form-control">
                            <option value="0">全部</option>
                            <option value="1">好友</option>
                            <option value="2">群聊</option>
                        </select>

                        <input
                                type="button"
                                class="btn btn-primary ml-2"
                                value="查询"
                                onclick="search()"
                        />
                        <input
                                type="reset"
                                class="btn btn-secondary ml-2"
                                value="清空"
                                onclick="search()"
                        />
                    </form>
                </div>
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery-confirm/jquery-confirm.min.js"></script>

<script
        type="text/javascript"
        src="js/bootstrap-table/bootstrap-table.min.js"
></script>
<script
        type="text/javascript"
        src="js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"
></script>
<script>
    $("#table").bootstrapTable({
        classes: "table border-bottom table-hover",
        url: "/chat/list",
        method: "get",
        dataType: "json", // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
        uniqueId: "id",
        idField: "id", // 每行的唯一标识字段
        toolbar: "#toolbar", // 工具按钮容器
        clickToSelect: true, // 是否启用点击选中行
        showColumns: true, // 是否显示所有的列
        showRefresh: true, // 是否显示刷新按钮
        showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
        pagination: true, // 是否显示分页
        sortOrder: "asc", // 排序方式

        // 响应处理
        responseHandler: function (res) {
            return res.data;
        },

        // 查询参数
        queryParams: function () {
            return $("form:eq(0)").serializeArray();
        },

        sidePagination: "client", // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1, // 初始化加载第一页，默认第一页
        pageSize: 6, // 每页的记录行数
        pageList: [3, 6, 9, 12], // 可供选择的每页的行数

        columns: [
            {
                field: "example",
                checkbox: true, // 是否显示复选框
            },
            {
                field: 'chatId',
                visible: false
            },
            {
                field: 'no',
                align: 'center',
                title: '序号',
                formatter: function (value, row, index) {
                    //返回序号，注意index是从0开始的，所以要加上1
                    return index + 1;
                }
            },
            {
                field: "chatAvatar",
                align: "center",
                title: "头像",
                formatter: function (value, row, index) {
                    return '<img src="' + value + '" width="40px" height="40px" />';
                }
            },
            {
                field: "chatName",
                align: "center",
                title: "名称",
            },
            {
                field: "chatType",
                align: "center",
                title: "类型",
                formatter: function (value, row, index) {
                    var value = "";
                    if (row.chatType == 1) {
                        value = '<span class="badge badge-primary">好友</span>';
                    } else if (row.chatType == 2) {
                        value = '<span class="badge badge-success">群聊</span>';
                    } else {
                        value = "-";
                    }
                    return value;
                },
            },
            {
                field: "operate",
                align: "center",
                title: "操作",
                formatter: btnGroup, // 自定义方法
                events: {
                    "click .chat-btn": function (event, value, row, index) {
                        onChat(row);
                    },
                    "click .detail-btn": function (event, value, row, index) {
                        onDetail(row);
                    },
                    "click .top-btn": function (event, value, row, index) {
                        onTop(row);
                    },
                    "click .del-btn": function (event, value, row, index) {
                        onDelete(row);
                    },
                    "click .quit-btn": function (event, value, row, index) {
                        onQuit(row);
                    }
                },
            },
        ],
    });

    // 操作按钮
    function btnGroup(value, row, index) {
        let html = '<a href="#" class="btn btn-xs btn-primary mr-2 chat-btn" title="发消息" >发消息</a>' +
            '<a href="#" class="btn btn-xs btn-success mr-2 detail-btn" title="更多信息" >更多信息</a>' +
            '<a href="#" class="btn btn-xs btn-warning mr-2 top-btn" title="置顶聊天">置顶聊天</a>';


        if (row.chatType == 1) {
            html += '<a href="#" class="btn btn-xs btn-danger del-btn" title="删除好友">删除好友</a>';
        } else if (row.chatType == 2) {
            html += '<a href="#" class="btn btn-xs btn-danger quit-btn" title="退出群聊">退出群聊</a>';
        }

        return html;
    }

    // 操作方法 - 聊天
    function onChat(row) {
        window.location.href = "/content?chatId=" + row.chatId;
    }

    // 操作方法 - 详情
    function onDetail(row) {
        window.location.href = "/detail/" + row.chatId;
    }

    // 操作方法 - 置顶
    function onTop(row) {
        console.log('置顶', row);
    }

    // 操作方法 - 退出
    function onQuit(row) {
        console.log('退出', row);
    }

    // 操作方法 - 删除
    function onDelete(row) {
        $.confirm({
            title: '删除',
            content: '您确定要将' + row.chatName + '删除吗？',
            type: 'red',
            icon: 'mdi mdi-close',
            typeAnimated: true,
            buttons: {
                confirm: {
                    text: '确认',
                    btnClass: 'btn-red',
                    action: function () {
                        $.get("/chat/delete/" + row.chatId, function (data) {
                            if (data.code == 200) {
                                $("#table").bootstrapTable("refresh");
                            } else {
                                $.alert({
                                    title: '失败',
                                    content: data.message,
                                    type: 'red',
                                    icon: 'mdi mdi-close',
                                    typeAnimated: true,
                                });
                            }
                        });
                    }
                },
                cancel: { // 取消按钮
                    text: '取消',
                    action: function () {
                    }
                }
            }
        });
    }

    // 操作方法 - 查询
    function search() {
        $("#table").bootstrapTable("refresh");
    }
</script>
</body>
</html>
